<extend name="Public:base" />
<block name="css">
	<style type="text/css">
		header {
			margin: 25px 0;
		}
		.form {
			margin-top: 10px;
		}
		#email_verify, #phone_verify {
			display: inline-block;
			width: auto;
		}
	</style>
</block>
<block name="js">
	<script type="text/javascript">
		$('#signUp-tablist a').click(function (e) {
			  e.preventDefault()
			  $(this).tab('show')
		})
		
		function showSetp2(mode) {
			$("#setp1_panel").addClass("hidden");
			$("#setp2_panel").removeClass("hidden");
		}
		
		var status = {
				email:	false,
				phone:	false,
				email_verify:	false,
				phone_verify:	false,
				email_password:	false,
				phone_password:	false,
				email_repassword:	false,
				phone_repassword:	false,
		};
		
		function inputBlur(node) {
			var $node = $(node);
			var id = $node.attr("id");
			var name = $node.attr("name");
			var $parent = $node.parent("div");
			var $err = $("#" + id + "_err");
			var $icon = $("#" + id + "_icon");
			// 检验开始。。。
			$parent.attr("class", "form-group has-warning has-feedback");
			$err.html("检测中。。。");
			$icon.attr("class", "glyphicon glyphicon-warning-sign form-control-feedback");
			// 检验中。。。
			var args = {};
			args[name] = $node.val();
			args['type'] = name;
			$.post("{:U('Sign/ajaxValidateField')}", args, function(data) {
				// 检验失败
				if (!data.status) {
					$parent.attr("class", "form-group has-error has-feedback");
					$err.html(data.msg);
					$icon.attr("class", "glyphicon glyphicon-remove form-control-feedback");
				// 校验成功
				} else {
					$parent.attr("class", "form-group has-success has-feedback");
					$err.html("");
					$icon.attr("class", "glyphicon glyphicon-ok form-control-feedback");
				}
			}, 'json');
		}
		
		function checkRepasswd(node) {
			var $node = $(node);
			var prefix = $node.attr("data-prefix");
			var passwd = $("#" + prefix + "password").val();
			var repasswd = $node.val();
			
			var id = $node.attr("id");
			var $parent = $node.parent("div");
			var $err = $("#" + id + "_err");
			var $icon = $("#" + id + "_icon");
			// 检验失败
			if (passwd != repasswd) {
				$parent.attr("class", "form-group has-error has-feedback");
				$err.html("两次密码不一致");
				$icon.attr("class", "glyphicon glyphicon-remove form-control-feedback");
			// 校验成功
			} else {
				$parent.attr("class", "form-group has-success has-feedback");
				$err.html("");
				$icon.attr("class", "glyphicon glyphicon-ok form-control-feedback");
			}
		}
		
		function inputFocus(node) {
			var $node = $(node);
			$node.parent("div").attr("class", "form-group has-feedback");
			var id = $node.attr("id");
			$("#" + id + "_err").html("");
			$("#" + id + "_icon").attr("class", "");
		}
	</script>
</block>
<block name="body">
  <div class="container">
	<header class="row">
		<div class="col-md-2"></div>
		<div class="col-md-4">
			<a href="{:U('Index/index')}"><img src="__PUBLIC__/img/logo.png" class="img-responsive" alt="{:C('WEB_NAME')}"></a>
		</div>
		<div class="col-md-6"></div>
	</header>
	<section class="row">
		<div class="col-md-6 col-md-offset-2">
		
			<div id="setp1_panel">
				<h4 class="text-center">第一步：请选择注册方式</h4>
				<br />
				<button type="button" class="btn btn-default btn btn-block" onclick="showSetp2('email')">邮箱注册</button>
				<button type="button" class="btn btn-default btn btn-block" onclick="showSetp2('phone')">手机号码注册</button>
			</div>	<!-- /setp1_panel -->
			

			<div id="%1$s_panel" class="hidden">
				<h4 class="text-center">第二步：填写信息</h4>
				<br />
				<form action="%3$s" method="post">
					<!-- Email Or Phone -->
					<div class="form-group has-feedback">
						<input type="text" class="form-control" id="%1$s" placeholder="请输入正确的%2$s" onblur="inputBlur(this)" onfocus="inputFocus(this)">
						<span id="%1$s_icon" class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
						<p id="%1$s_err" class="text-danger"></p>
					</div>
					<!-- Verify -->
					<div class="row">
						<div class="col-md-4">
							<button type="button" class="btn btn-default">发送验证码</button></label>
						</div>
						<div class="col-md-4">
							<div class="form-group has-feedback">
								<input type="text" class="form-control" id="verify">
								<span class="glyphicon glyphicon-ok form-control-feedback"></span>
							</div>						
						</div>
						<div class="col-md-4">
							<span>error!!!!!</span>
						</div>
					</div>	<!-- /row -->
					<!-- Password -->
					<div class="form-group has-feedback">
						<input type="text" class="form-control" id="arg" placeholder="请输入正确的xxx" onblur="inputBlur(this)" onfocus="inputFocus(this)">
						<span id="arg_icon"></span>
						<p id="arg_err" class="text-danger"></p>
					</div>
					<!-- RePassword -->
					<div class="form-group has-feedback">
						<input type="text" class="form-control" id="arg" placeholder="请输入正确的xxx" onblur="inputBlur(this)" onfocus="inputFocus(this)">
						<span id="arg_icon"></span>
						<p id="arg_err" class="text-danger"></p>
					</div>
				</form>
				<button type="button" class="btn btn-default btn-block">注册</button>
			</div>	<!-- /setp2_panel -->
			
			
			
		</div>
		<!-- 条款Modal -->
		<div class="modal fade" id="clauseModal" tabindex="-1" role="dialog" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">条款</h4>
		      </div>
		      <div class="modal-body">
		        <p>1、.................................</p>
		        <p>2、.................................</p>
		        <p>3、.................................</p>
		        <p>4、.................................</p>
		        <p>5、.................................</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="col-md-4">
			<br />
			<h4>已有账号，到<a href="{:U('Index/index')}">首页</a>登陆</h4>
			<br />
	      	<h5>其他登陆方式</h5>
	      	<a class="icon-link" href=""><img src="__PUBLIC__/img/weibo.png" alt="weibo"></a>
	      	<a class="icon-link" href=""><img src="__PUBLIC__/img/qq.png" alt="qq"></a>
	      	<a class="icon-link" href=""><img src="__PUBLIC__/img/weixin.png" alt="weixin"></a>			
		</div>
	</section>
  </div>	
	<include file="Public:footer" />
</block>
